<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" style="border: 1px solid red;padding: 10px;">
        <h1>测试匿名插槽</h1>
        <!-- 引入子组件 -->
         <default-slot>
            <p style="color: red;">传给子组件匿名插槽的内容</p>
         </default-slot>
    </div>

    <!-- 子组件模版 -->
     <template id="default-slot">
        <div style="border: 1px solid blue;padding: 10px;">
            <header>头部内容</header>
            <!-- 匿名插槽 -->
             <slot>插槽默认内容</slot>
             <footer>底部内容</footer>
        </div>
     </template>
     <script src="js/vue.js"></script>
     <script>
        //创建Vue实例，并将父组件注册到Vue实例中
        const app = new Vue({
            el:'#app',
            components:{
                //注册子组件
                'default-slot':{
                    template:'#default-slot',
                }
            }
        })
     </script>
</body>
</html>